<template>
	<view style="width: 100%;" class="content">
		<view style="width: 100%;" class="">
			<search></search>
		</view>
		<view class="list">
			<view style="height: 100%;" class="listmg">
				<scroll-view :style="{'height': height}" scroll-y="true" >
					<template v-for="(item,index) in blist">
						<view @click="funss(index)" class="text" :class="num == index?'font':''" >
							{{item.cat_name}}
						</view>
					</template>

				</scroll-view>
			</view>
			<view style="flex: 1;">
				<scroll-view :style="{'height': height}" scroll-y="true" >
					<view class="" v-for="item in com">
						<view class="title" style="margin: 10px 20px;">{{item.cat_name}}</view>
						<view class="listimg">
							<view class="sss" style="text-align: center;margin: 10px 0;" v-for="items in item.children">
							<navigator :url="'../../subpkg/shoplist/shoplist?query='+items.cat_name">
								<view><img style='width: 100%;height: 100px;' :src="items.cat_icon" alt=""></view>
								<view>{{items.cat_name}}</view>
							</navigator>
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import search from '../../components/my_search/my_search.vue'
</script>
<script>
	export default {
		data() {
			return {
				height:'200px',
				blist:[],
				num:0
			};
		},
		onLoad(){
			this.fun()
			this.funs()
		},
		methods:{
			fun(){
				// this.height = '300px'
				uni.getSystemInfo({
					success: (res) => {
						this.height=(res.windowHeight-46)+'px'
					}
				});
			},
			funs(){
				uni.request({
				    url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories', 
				    data: {},
				    success: (res) => {
				        console.log(res.data.message);
				        this.blist = res.data.message;
				    }
				});
			},
			funss(i){
				this.num = i
			}
		},
		computed:{
			com(){
				if(this.blist[0] == undefined)return 1
				return this.blist[this.num].children
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body{
		height: 100%;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.list{
		flex: 1;
		width: 100%;
		// background-color: red;
		display: flex;
	}
	.listmg{
		// background-color: blue;
		width: 100px;
	}
	.text{
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid lightslategray;
	}
	.listimg{
		display: flex;
		flex-wrap: wrap;
		>view{
			width: 33.3%;
		}
	}
	.font{
		font-weight: bold;
	}
</style>
